<template>
	<view>
		<uni-nav-bar 
		height="130rpx" 
		white left-icon="left"
		 leftText="返回" 
		 leftWidth='200rpx'
		 rightWidth='200rpx'
		 rightText="缴费记录"
		  title="生活缴费" 
		  @clickRight="$utils.go('/pages/PayTheFees/PaymentRecords')"
		   @clickLeft="$utils.ret()"
		   />
		<view class="room_number">
			<view class="room">
				<span>清水湾1号楼1单元2203</span><uni-icons type="down" class="icon"></uni-icons>
			</view>
		</view>
		<!-- 缴费 -->
		<view class="payment">
			<view class="container">
				<view class="money">
					应缴费:<text>360.00元</text>
				</view>

				<button class="btn" @click="$utils.go('/pages/pay/pay')">缴费</button>
			</view>
		</view>
		<!-- 缴费账单 -->
		<view class="bill_box">
			<view class="bill">
				<view class="cost">
					<view class="tit">物业费账单</view>
				</view>
				<view class="room_num">
					<view class="room_key">
						房号
					</view>
					<view class="num">
						1201
					</view>
				</view>
				<view class="unit">
					<view class="single">
						账单
					</view>
					<view class="date">
						2021-8-1至2021-10-1
					</view>
				</view>
				<view class="figure">
					<view class="amont">
						账单金额
					</view>
					<view class="coin">
						￥360.00元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100vh;
		background-color: #f0f0f0
	}



	/deep/.uni-navbar__content {
		border: none;
	}

	/deep/.uni-nav-bar-right-text {
		color: #346ffd !important;
	}


	/* 房号 */
	.room_number {
		height: 105rpx;
	}

	.room {
		height: 105rpx;
	}

	.room span {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 30rpx;
		color: #0f0f0f;
		padding-left: 25rpx;
	}

	/deep/ .icon {
		height: 105rpx;
		line-height: 105rpx;
		padding-left: 20rpx;
		font-size: 25rpx !important;
	}

	/* 缴费 */
	.payment {
		/* width: 750rpx; */
		padding-left: 10rpx;
		padding-right: 10rpx ;
		margin-bottom: 20rpx;
	}

	.container {
		display: block;
		height: 330rpx;
		background: linear-gradient(to bottom right, #f15c6b, #65d8f1);
		border-radius: 30rpx;
		/* 图片铺满整个容器 */
		/* margin-left: 10rpx;
		margin-right: 10rpx; */
		margin: 0 auto;
	}

	.money {
		height: 205rpx;
		line-height: 205rpx;
		font-size: 38rpx;
		text-align: center;
		color: white;
	}

	.btn {
		width: 290rpx;
		height: 85rpx;
		color: #00a2f1;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	/* 缴费账单 */
	.bill_box {
		padding-left: 10rpx;
		padding-right: 10rpx;
		height: 100%;
	}

	.bill {
		height: 330rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.cost {
		height: 80rpx;
		border-bottom: 1px solid #eeeeee;
		line-height: 80rpx;
		font-size: 25rpx;
	}

	.tit {
		margin-left: 30rpx;
	}

	.room_num {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}

	.room_key {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;

	}

	.num {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}

	.unit {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}

	.single {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;

	}

	.date {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}

	.figure {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}

	.amont {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}

	.coin {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}


	.billes {
		width: 730rpx;
		height: 205rpx;
		background-color: white;

		border-radius: 10rpx;
		margin-bottom: 15rpx;
	}

	.unites {
		height: 75rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}

	.singles {
		width: 70rpx;
		height: 75rpx;
		font-size: 35rpx;
		line-height: 95rpx;
	}

	.dates {
		height: 65rpx;
		font-size: 35rpx;
		line-height: 95rpx;
	}

	.figures {
		height: 75rpx;
		display: flex;
		justify-content: space-between;
	}

	.amonts {
		height: 75rpx;
		font-size: 35rpx;
		line-height: 95rpx;
	}

	.coins {
		height: 75rpx;
		font-size: 35rpx;
		line-height: 95rpx;
	}
</style>